import React,{useState} from 'react'
import './backcloth.css'
import { Tabs } from 'antd';
import type { TabsProps } from 'antd';
import BackImage from '../backImage/backImage'
const backcloth = () => {
    const [activeKey, setActiveKey] = useState<string>('1');

    const onChange = (key: string) => {
        setActiveKey(key);
        console.log(key);
    };
    const [selectedColor, setSelectedColor] = useState("");
  const colors = [
    "#000000",
    "#999999",
    "#cccccc",
    "#ffffff",
    "#f8f8fb",
    "#e65353",
    "#ffd835",
    "#70bc59",
    "#607af4",
    "#976bee",
  ];
  const items: TabsProps['items'] = [
        {
            key: '1',
            label: '背景',
            children: activeKey === '1' && <div>
                <div className="imgs">
                    <BackImage 
                        title="扁平几何" 
                        images={[
                            "../src/assets/images/bei1.png",
                            "../src/assets/images/bei2.png"
                        ]}
                    />
                    <BackImage 
                        title="商务科技" 
                        images={[
                           "../src/assets/images/bei3.png",
                            "../src/assets/images/bei4.png"
                        ]}
                    />
                    <BackImage 
                        title="政府党建" 
                        images={[
                            "../src/assets/images/bei5.png",
                            "../src/assets/images/bei6.png"
                        ]}
                    />
                    <BackImage 
                        title="文艺清新" 
                        images={[
                            "../src/assets/images/bei7.png",
                            "../src/assets/images/bei8.png"
                        ]}
                    />
                    <BackImage 
                        title="手绘卡通" 
                        images={[
                            "../src/assets/images/bei9.png",
                            "../src/assets/images/bei10.png"
                        ]}
                    />
                    <BackImage 
                        title="国风水墨" 
                        images={[
                            "../src/assets/images/bei11.png",
                            "../src/assets/images/bei12.png"
                        ]}
                    />
                </div>
            </div>,
        },
        {
            key: '2',
            label: '最近使用',
            children: activeKey === '2' && <div>暂无使用内容~</div>,
        },
        {
            key: '3',
            label: '收藏',
            children: activeKey === '3' && <div>暂无收藏内容~</div>,
        },
        
    ];
  const handleColorClick = (color: string) => {
    setSelectedColor(color);
    console.log("Selected color:", color);
  };
  return (
    <div>
      {/* 搜索框 */}
            <div className='Left_search'>
                <i className='iconfont icon-Magnifier'></i>
                <input type="text" placeholder='搜索背景' />
            </div>
            <div className="color-grid">
            {colors.map((color, index) => (
            <div
                key={index}
                className={`color-sample ${selectedColor === color ? "selected" : ""}`}
                style={{ backgroundColor: color }}
                onClick={() => handleColorClick(color)}
            ></div>
            ))}
        </div>
        <Tabs defaultActiveKey="1" items={items} activeKey={activeKey} onChange={onChange} className='Left_tabs ' />
    </div>
  )
}

export default backcloth
